<!--
 * @Author: jiang 957525929@qq.com
 * @Date: 2023-01-06 08:57:37
 * @LastEditors: jiang 957525929@qq.com
 * @LastEditTime: 2023-01-07 16:48:57
 * @FilePath: \screen-visual-designer\src\components\page-content\index.vue
-->

<template>
  <v-scale-screen width="1920" height="1080">
    <div class="test test-color">
      <!-- {{ global.test }}
      <br />
      <n-button type="primary" @click="clickTest">
        <template #icon>
          <i class="iconfont icon-ceshi center"></i>
        </template>
        naive-ui
      </n-button> -->
      <div class="parent" @wheel="handleWeel" :style="`width:${wheelObj.elWidth}px;height:${wheelObj.elHeight}px;transform: scale(${wheelObj.zoom})`">
        <DraggableContainer :key="wheelObj.key">
          <Vue3DraggableResizable
            class="box1"
            :initW="box1.w"
            :initH="box1.h"
            v-model:x="box1.x"
            v-model:y="box1.y"
            v-model:w="box1.w"
            v-model:h="box1.h"
            :parent="true"
            v-model:active="box1.active"
            :draggable="true"
            :resizable="true"
            @activated="print('activated')"
            @deactivated="print('deactivated')"
            @drag-start="print('drag-start')"
            @resize-start="print('resize-start')"
            @dragging="print('dragging')"
            @resizing="print('resizing')"
            @drag-end="print('drag-end')"
            @resize-end="print('resize-end')"
          >
            This is a test example1
          </Vue3DraggableResizable>
          <!-- <Vue3DraggableResizable
            class="box2"
            :initW="box2.w"
            :initH="box2.h"
            v-model:x="box2.x"
            v-model:y="box2.y"
            v-model:w="box2.w"
            v-model:h="box2.h"
            :parent="true"
            v-model:active="box2.active"
            :draggable="true"
            :resizable="true"
            @activated="print('activated')"
            @deactivated="print('deactivated')"
            @drag-start="print('drag-start')"
            @resize-start="print('resize-start')"
            @dragging="print('dragging')"
            @resizing="print('resizing')"
            @drag-end="print('drag-end')"
            @resize-end="print('resize-end')"
          >
            This is a test example2
          </Vue3DraggableResizable> -->
        </DraggableContainer>
      </div>
      <div class="map-container" id="map"></div>
    </div>
  </v-scale-screen>
</template>

<script setup lang="ts">
import { Map, View } from "ol"; // 地图实例方法、视图方法
import Tile from "ol/layer/Tile"; // 瓦片渲染方法
import OSM from "ol/source/OSM"; // OSM瓦片
import "ol/ol.css"; // 地图样式

import { ref, reactive, onMounted } from "vue";
// 自适应方案
import VScaleScreen from "v-scale-screen";

// import { GlobalStore } from "@/store";
// const global = GlobalStore();

// // 修改state数据测试
// const clickTest = () => {
//   global.setTest("test1111");
// };

// 拖拽
interface Obj {
  x: number;
  y: number;
  h: number;
  w: number;
  active: boolean;
}
const box1: Obj = reactive({
  x: 0,
  y: 0,
  h: 100,
  w: 100,
  active: false,
});
const box2: Obj = reactive({
  x: 0,
  y: 200,
  h: 100,
  w: 100,
  active: false,
});
const print = (val: string) => {
  console.log(val);
};

// 地图

let map: any = ref(null);
const initMap = () => {
  map.value = new Map({
    target: "map", // 对应页面里 id 为 map 的元素
    layers: [
      // 图层
      new Tile({
        // 使用瓦片渲染方法
        source: new OSM(), // 图层数据源
      }),
    ],
    view: new View({
      // 地图视图
      projection: "EPSG:4326", // 坐标系，有EPSG:4326和EPSG:3857
      center: [102.712251, 25.040609], // 昆明坐标
      minZoom: 10, // 地图缩放最小级别
      zoom: 12, // 地图缩放级别（打开页面时默认级别）
    }),
  });
};
onMounted(() => {
  initMap();
});
// 滚轮放大缩小事件
interface WheelObj {
  zoom: number; // 缩放比例
  initWidth: number; // 父元素的宽-自适应值
  initHeight: number; // 父元素的高-自适应值
  elWidth: number; // 元素宽
  elHeight: number; // 元素高
  meter_zoom: number; // 子元素缩放比例
  key: number;
}
const wheelObj: WheelObj = reactive({
  zoom: 1,
  initWidth: 500,
  initHeight: 500,
  elWidth: 500,
  elHeight: 500,
  meter_zoom: 1,
  key: 0,
});
const handleWeel = (e: any) => {
  if (e.wheelDelta < 0) {
    wheelObj.zoom -= 0.05;
  } else {
    wheelObj.zoom += 0.05;
  }
  if (wheelObj.zoom >= 3) {
    wheelObj.zoom = 3;
    return;
  }
  if (wheelObj.zoom <= 0.5) {
    wheelObj.zoom = 0.5;
    return;
  }

  //   wheelObj.elWidth = wheelObj.initWidth * wheelObj.zoom;
  //   wheelObj.elHeight = wheelObj.initHeight * wheelObj.zoom;
  //   box1.h = 110 * wheelObj.zoom;
  //   box1.w = 110 * wheelObj.zoom;
  //   box2.h = 110 * wheelObj.zoom;
  //   box2.w = 110 * wheelObj.zoom;
  wheelObj.key++;
};
</script>

<style lang="scss" scoped>
.test-color {
  font-size: 32px;
}

// iconfont垂直居中问题
.center {
  height: 20px;
  line-height: 20px;
}

.parent {
  width: 500px;
  height: 500px;
  position: absolute;
  top: 100px;
  left: 100px;
  border: 1px solid #000;
  user-select: none;
  background-color: green;
  font-size: 16px;

  .box1 {
    background-color: white;
  }

  .box2 {
    background-color: gray;
  }
}

.map-container {
  width: 800px;
  height: 800px;
  position: absolute;
  right: 100px;
  bottom: 100px;
}
</style>
